<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米账号-登录</title>
    <script src="Vue.js"></script>
    <link rel="stylesheet" href="loginCss/login.css">
</head>
<div id="app">
    <div class="top">
        <img :src="logo" alt="">
    </div>
    <div class="bottom">
        <div class="model">
            <div class="model-top">
                <span @click="show=!show">账号登录</span>
                <span id="rowOne">|</span>
                <span @click="">扫码登录</span>
            </div>
            <div class="QRcode">
                    <img :src="qr" alt="">

            </div>
            <div class="word">
               <p>使用 <span>小米商城APP</span> 扫一扫</p>
                <p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
            </div>
        </div>
    <div class="model" v-show="show">
            <div class="model-top">
                <span @click="">账号登录</span>
                <span id="row">|</span>
                <span @click="show=!show" class="color">扫码登录</span>
            </div>
        <div class="model-body">
            <input type="text" v-model="name">
            <input type="password" v-model="password" placeholder="密码"><br>
            <button @click="">登录</button>
            <span @click="show=false" id="phone">手机短信登录/注册</span>
            <span id="pass">立即注册｜忘记密码</span>
        </div>
        <div class="model-word">
            <p>其他方式登录</p>
        </div>
        <div class="model-bottom">
            <img :src="QQ" alt="">
            <img :src="web" alt="">
            <img :src="alipay" alt="">
            <img :src="weixin" alt="">
        </div>
    </div>
    </div>
</div>
<body>
<script>
 let app=new Vue({
     el:'#app',
     data:{
         name:"邮箱/手机号码/小米ID",
         password:"",
         login:true,
         show:true,
         qr:'Imgs/下载.png',
         logo:'https://account.xiaomi.com/static/res/7f6f2f5/account-static/respassport/acc-2014/img/mistore_logo.png',
         QQ:'Imgs/qq.png',
         web:'Imgs/微博.png',
         alipay:'Imgs/支付宝.png',
         weixin:'Imgs/微信.png',


     },
     methods:{
            // show:function (e) {
            //
            // },
            hide:function (e) {
                    letthis.show==2;
            }

     }

 })
</script>
</body>
</html>